<template>
	<view class="page_t">
		<pageheader :setting="settingdata"></pageheader>
		<scroll-view scroll-y="true" class="romms" :scroll-top="scrollTop">
			<!-- <view class="roomtime">2020.12.12 11:20</view> -->
			<view id="pagetop" style="height: 10rpx;"></view>
			<view class="others">
				<image
					src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2395576114,731243926&fm=11&gp=0.jpg"
					mode="aspectFill"></image>
				<view class="othersmodal">欢迎光临本店，支持在线交易，你也可以选择打电话咨询！</view>
			</view>

			<view class="roomtype" v-if="type==1">通过预约看货，发起聊天</view>
			<view class="roomtype" v-if="type==2||type==3">通过聊一聊，发起聊天</view>
			<view class="roomtype" v-if="type==4">通过求购大厅，发起聊天</view>
			<view class="roomtype" v-if="type==5">通过商品，发起聊天</view>

			<view class="roomtime" v-if="goods.createtime">{{goods.createtime}}</view>

			<view class="roomshops" v-if="type==5">
				<navigator class="flex" :url="'/home/index/supplydetail?id='+goods.id" hover-class="none">
					<image :src="goods.images[0]" mode="aspectFill"></image>
					<view class="roomshops_info">
						<text class="shopsname clamp1">{{goods.title}}</text>
						<view class="shopsprice">
							￥<text>{{goods.money}}</text>/{{goods.unit}}
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="28" class="arrow"></u-icon>
				</navigator>
				<view class="sendbox"><text @click="sendgood(5)" class="sendbtn">发给客服</text></view>
			</view>
			<!-- 右边的消息-求购消息 -->
			<view class="roomshops" v-if="type==4">
				<navigator :url="'/home/index/wantedetail?id='+goods.id" hover-class="none">
					<view class="roomshops_roomshops_caigou">
						<text class="shopsname clamp1" style="font-size: 32rpx;">{{goods.titles}}</text>
						<view class="txt" style="line-height: 50rpx;">采购数量:{{goods.number}}</view>
						<view class="txt">采购地点 : {{goods.city}}</view>
					</view>
				</navigator>
				<view class="sendbox"><text @click="sendgood(4)" class="sendbtn">发给客服</text></view>
			</view>



			<block v-for="(item,index) in msglist" :key="index">
				<!-- 右边的消息 -->
				<view class="mines" v-if="item.content.content!=undefined&&from_id==item.from_id">
					<view class="mymodal"
						v-if="item.content.type==1||item.content.type==2||item.content.type==4||item.content.type==5">
						{{item.content.content}}
					</view>
					<image :src="item.content.content" mode="" v-if="item.content.type==3" class="smsg"
						@click="showimg(item,index)"></image>

					<image :src="from_id==item.from_id?item.form_avatar:item.to_avatar" mode="aspectFill"
						@click="rightjump"></image>
				</view>

				<!-- 右边的消息-商品消息 -->
				<view class="roomshops" v-if="item.content.content==undefined&&item.content.goods_id">
					<navigator :url="'/home/index/supplydetail?id='+item.content.goods_id" hover-class="none"
						class="flex">
						<!-- item.content.content==undefined&&item.content.goods_id -->
						<image :src="item.content.image[0]" mode="aspectFill"></image>
						<view class="roomshops_info">
							<text class="shopsname clamp1">{{item.content.title}}</text>
							<view class="shopsprice">
								￥<text>{{item.content.money}}</text>/{{item.content.unit}}
							</view>
						</view>
						<u-icon name="arrow-right" color="#999999" size="28" class="arrow"></u-icon>
					</navigator>
				</view>

				<!-- 右边的消息-求购消息 -->
				<view class="roomshops" v-if="item.content.content==undefined&&item.content.demand_id">
					<navigator :url="'/home/index/wantedetail?id='+item.content.demand_id" hover-class="none">
						<view class="roomshops_roomshops_caigou">
							<text class="shopsname clamp1" style="font-size: 32rpx;">{{item.content.title}}</text>
							<view class="txt" style="line-height: 50rpx;">采购数量:{{item.content.number}}</view>
							<view class="txt">采购地点 : {{item.content.city}}</view>
						</view>
					</navigator>
				</view>

				<!-- 右边的消息-预约看货消息 -->
				<navigator url="/personal/supplyList" hover-class="none">
					<view class="mines" v-if="item.content.content==undefined&&item.content.order_id"
						style="margin: 23rpx 127rpx 0 0;">
						<view class="looksmodal">
							<text class="looktitle">预约看货</text>
							<view class="looksdetail">
								<image :src="item.content.image" mode="aspectFill"></image>
								<view class="looks_info">
									<text class="looks_infotitle clamp1">{{item.content.title}}</text>
									<text class="lokks_number">求购数量：{{item.content.number}}</text>
								</view>
							</view>
							<text class="metions">{{item.content.desc}}</text>
						</view>
						<!-- <image :src="from_id==item.from_id?item.form_avatar:item.to_avatar" mode="aspectFill"></image> -->
					</view>
				</navigator>


				<!-- 左边的消息 -->
				<view class="mines" style="justify-content: flex-start"
					v-if="item.content.content!=undefined&&from_id!=item.from_id">
					<!-- <image v-if="from_id==item.from_id" :src="from_id==item.from_id?item.form_avatar:item.to_avatar"
						mode="aspectFill" style="margin-left: 25rpx;" @click="leftjump(item.from_id)"></image> -->
					<image v-if="from_id!=item.from_id" :src="from_id==item.from_id?item.form_avatar:item.form_avatar"
						mode="aspectFill" style="margin-left: 25rpx;" @click="leftjump(item.from_id)"></image>

					<view class="mymodal"
						v-if="item.content.type==1||item.content.type==2||item.content.type==4||item.content.type==5">
						{{item.content.content}}
					</view>
					<image :src="item.content.content" mode="" v-if="item.content.type==3" class="smsg"
						@click="showimg(item,index)"></image>
				</view>

			</block>
			<!-- 占位置 -->
			<view style="height: 90rpx;background-color: transparent;"></view>
		</scroll-view>

		<view id="flag"></view>
		<view class="inputsbox" :class="bottom>0?'':'paddbom'" :style="'bottom:'+bottom+'px;'">
			<input v-model="warworld" @confirm='keyselect' type="text" :border="true" class="openwar"
				:adjust-position='false' :clearable="false" @focus='inputfocus($event)' @blur='inputblur' />
			<view v-if="warworld!=''" class="sendit" @click="sendmsg">发送</view>
			<view v-else class="sendother" @click="upimg">
				<u-icon name="plus" color="#808388" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import setDate from "../static/js/setDate.js"
	export default {
		data() {
			return {
				settingdata: {
					name: '',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "chatingroom"
				},
				warworld: '', //输入框
				msglist: [], //消息列表
				scrollTop: 0,
				nowtime: "", //发送时间
				from_id: wx.getStorageSync('client_uid'),
				seeorder: wx.getStorageSync('seeorder'),
				to_id: '',
				type: '', //1是预约看货消息,2是文本,3是图片,4求购消息,5商品消息
				goods: {}, //求购页面过来的数据
				textlist: [], // 输入内容数组

				sendimg: [], //图片
				sendimg_path: [], //发送给后台的图片

				sendtype: 1, //判断是发送文字还是图片

				msglists: [],
				bottom: 0,

				member_type: 1,
			}
		},

		onLoad(obj) {
			_this = this
			console.log(obj, '1预约看货,2文本3图片,4求购,5商品')
			if (obj.member_type) {
				_this.member_type = obj.member_type
			} else {
				_this.member_type = 1
			}
			_this.type = obj.type



			_this.goods = wx.getStorageSync('list')
			console.log(_this.goods, '上个页面的')

			wx.removeStorageSync('list')
			// 聊天人名字
			if (_this.goods.name) {
				_this.settingdata.name = _this.goods.name
			} else if (_this.goods.shop) {
				_this.settingdata.name = _this.goods.shop.shop_name
			} else if (_this.goods.shop_name) {
				_this.settingdata.name = _this.goods.shop_name
			}


			//设置消息接收人的id
			if (_this.goods.client_uid) {
				_this.to_id = _this.goods.client_uid
			} else if (_this.goods.shop) {
				console.log(444, _this.to_id)
				_this.to_id = _this.goods.shop.client_uid
				console.log(555, _this.to_id)
			}

			console.log(_this.goods, '赋值', _this.type)

		},

		onShow() {
			// this.nowtime = setDate.formatTime(new Date())
			wx.connectSocket({
				url: _this.$api.connectUrl(),
				header: {
					'content-type': 'application/json'
				},
				method: "get",
				success: (data) => {
					console.log(data)
					//如果链接成功，则监听 WebSocket 连接打开事件
					if (data.errMsg == "connectSocket:ok") {
						//监听 WebSocket 连接打开事件
						_this.handleSocketOpen();
					}
				}
			})

			_this.handleSocketMessage();
			_this.bot()
		},

		onUnload() {
			wx.closeSocket();
			console.log('连接已断开')
		},

		methods: {
			//监听 WebSocket 连接打开事件
			handleSocketOpen() {
				wx.onSocketOpen(() => {
					console.log('WebSocket 连接打开')
					setTimeout(function() {
						wx.sendSocketMessage({
							data: "ping",
						})
					}, 3000)
				})
			},

			handleSocketMessage() {
				console.log('接收消息')
				wx.onSocketMessage((data) => {

					let i
					i = JSON.parse(data.data)
					console.log(i, '发出去的消息')
					// toid为空就用传过来的id
					if (i.toid == null) {
						i.toid = _this.to_id
					}

					let contents = {}
					let info = {}

					info = {
						type: 'login',
						unique_id: _this.goods.unique_id ? _this.goods.unique_id : '',
						formid: wx.getStorageSync('client_uid'),
						to: {
							toid: _this.to_id
						}
					}

					// console.log(_this.goods, info)
					if (JSON.parse(data.data).type == 'init') {
						wx.sendSocketMessage({
							data: JSON.stringify(info),
							success: function() {
								console.log('发送成功')
							},
							fail: function() {
								console.log('发送失败')
							}
						})

						// else if (this.type == 1) {
						// contents = wx.getStorageSync('seeorder')
						// info = {
						// 	type: "chatMessage",
						// 	mine: {
						// 		content: contents,
						// 		formid: wx.getStorageSync('client_uid'),
						// 		type: _this.type
						// 	},
						// 	to: {
						// 		toid: wx.getStorageSync('seeorder').client_uid
						// 	}
						// }
						// wx.sendSocketMessage({
						// 	data: JSON.stringify(info),
						// 	success: function() {
						// 		console.log('发送商品信息成功')

						// 		wx.removeStorageSync('seeorder')
						// 	},
						// 	fail: function() {
						// 		console.log('发送失败')
						// 	}
						// })
						// }
					} else if (JSON.parse(data.data).type == 'chatList') {

						console.log(JSON.parse(i.content), 'chatList', _this.msglist)

					} else if (JSON.parse(data.data).type == 'chatMessage') {
						i.from_id = i.formid
						_this.msglist.push(i)
						// if (i.from_id == this.from_id) {
						// } else {
						// 	_this.msglists.push(i)
						// 	console.log(this.msglists,'llllllllllllllllllllllllllllllllll')
						// }
						console.log(_this.msglist, 'msglist渲染的列表chatMessage')
						_this.bot()
					} else if (JSON.parse(data.data).type == 'chatContent') {
						let j = i.list
						// if (j && j != null) {}
						console.log(JSON.parse(j), 'chatContent消息列表')
						_this.msglist = JSON.parse(j)
					}

				})
			},

			// 点击发送消息
			sendmsg() {

				let arr = []
				arr.push(this.warworld)
				this.textlist = this.textlist.concat(arr)
				_this.warworld = ''

				let contents = {}
				let info = {}
				contents = {
					content: this.textlist.join(','),
					type: _this.type
				};

				this.textlist = []


				// console.log(_this.goods,'ffffff')

				let toid = ''
				if (wx.getStorageSync('client_uid') == _this.goods.from_id) {
					toid = _this.goods.to_id
				} else {
					toid = _this.goods.from_id
				}

				if (this.type == 2) {
					info = {
						type: "chatMessage",
						mine: {
							content: contents,
							formid: wx.getStorageSync('client_uid'),
							type: _this.type,
							member_type: _this.member_type
						},
						to: {
							toid: toid
						}
					}
				} else if (this.type == 4) {
					info = {
						type: "chatMessage",
						mine: {
							content: contents,
							formid: wx.getStorageSync('client_uid'),
							type: _this.type,
							member_type: _this.member_type
						},
						to: {
							toid: _this.goods.client_uid
						}
					}
				} else if (this.type == 5) {
					info = {
						type: "chatMessage",
						mine: {
							content: contents,
							formid: wx.getStorageSync('client_uid'),
							type: _this.type,
							member_type: _this.member_type
						},
						to: {
							toid: _this.goods.shop ? _this.goods.shop.client_uid : _this.goods.client_uid
						}
					}
				}
				// else if (this.type == 1) {
				// 	info = {
				// 		type: "chatMessage",
				// 		mine: {
				// 			content: contents,
				// 			formid: wx.getStorageSync('client_uid'),
				// 			type: _this.type
				// 		},
				// 		to: {
				// 			toid: wx.getStorageSync('seeorder').client_uid
				// 		}
				// 	}
				// }


				console.log(_this.goods, info, '发出去的消息')
				wx.sendSocketMessage({
					data: JSON.stringify(info),
					success: function() {
						console.log('发送成功')
						_this.bot()
					},
					fail: function() {
						console.log('发送失败')
					}
				})
			},

			//上传图片
			upimg() {
				console.log(_this.type, 'type类型')
				// _this.type = 3

				_this.$plug.uploadimg(1, _this.$api.getbase() + 'fileupload', function(data) {
					console.log(data)
					_this.sendimg = data.web[0]
					_this.sendimg_path = data.back[0]

					let contents = {
						content: _this.sendimg,
						type: 3
					};

					_this.sendimg = []

					let info = {}
					let toid = ''
					if (wx.getStorageSync('client_uid') == _this.goods.from_id) {
						toid = _this.goods.to_id
					} else {
						toid = _this.goods.from_id
					}


					if (_this.type == 2) {
						info = {
							type: "chatMessage",
							mine: {
								content: contents,
								formid: wx.getStorageSync('client_uid'),
								type: _this.type,
								member_type: _this.member_type
							},
							to: {
								toid: toid
							}
						}
					} else if (_this.type == 4) {
						info = {
							type: "chatMessage",
							mine: {
								content: contents,
								formid: wx.getStorageSync('client_uid'),
								type: _this.type,
								member_type: _this.member_type
							},
							to: {
								toid: _this.goods.client_uid
							}
						}
					} else if (_this.type == 5) {
						info = {
							type: "chatMessage",
							mine: {
								content: contents,
								formid: wx.getStorageSync('client_uid'),
								type: _this.type,
								member_type: _this.member_type
							},
							to: {
								toid: _this.goods.shop ? _this.goods.shop.client_uid : _this.goods.client_uid
							}
						}
					} else if (_this.type == 1) {
						info = {
							type: "chatMessage",
							mine: {
								content: contents,
								formid: wx.getStorageSync('client_uid'),
								type: _this.type,
								member_type: _this.member_type
							},
							to: {
								toid: wx.getStorageSync('seeorder').client_uid
							}
						}
					}

					console.log(_this.goods, info)
					wx.sendSocketMessage({
						data: JSON.stringify(info),
						success: function() {
							console.log('发送成功')
							_this.bot()
						},
						fail: function() {
							console.log('发送失败')
						}
					})

				})
			},

			//聊天消息始终显示最底端
			bot() {
				let top = 0
				let flagtop = 0
				let pagetop = 0
				setTimeout(function() {
					wx.createSelectorQuery().select('#flag').boundingClientRect(function(rect) {
						flagtop = rect.top
					}).exec();
					wx.createSelectorQuery().select('#pagetop').boundingClientRect(function(rect) {
						pagetop = rect.top
						wx.pageScrollTo({
							scrollTop: flagtop + Math.abs(pagetop),
							duration: 0
						})
						console.log(flagtop, pagetop, flagtop + Math.abs(pagetop), 'toptoptoptop')
					}).exec();

				}, 300);
			},


			//查看图片
			showimg(item, index) {
				if (Array.isArray(item.content.content)) {
					_this.$plug.showImg(item.content.content, index)
				} else {
					let arr = []
					arr.push(item.content.content)
					console.log(arr)
					_this.$plug.showImg(arr, index)
				}
			},

			// 回车发送
			keyselect: function() {
				let newkey = _this.warworld
				console.log(newkey.length)
				if (newkey.length > 0) {
					_this.sendmsg()
				} else {
					wx.showToast({
						title: '请输入消息内容',
						icon: 'none',
						duration: 1000
					})
				}

			},

			leftjump(id) {
				console.log(id)
				wx.navigateTo({
					url: '/home/station/stationpage?id=' + id + '&chat_type=1'
				})
				wx.closeSocket();
				console.log('连接已断开')
			},

			rightjump() {
				wx.navigateTo({
					url: '/pages/personal/personal'
				})
				wx.closeSocket();
				console.log('连接已断开')
			},
			inputfocus(event) {
				_this.bottom = event.detail.height
				_this.bot()
				console.log(event)
			},
			inputblur() {
				_this.bottom = 0
			},

			sendgood(type) {
				let contents = {}
				let info = {}

				if (type == 4) {
					contents = {
						demand_id: _this.goods.id,
						title: _this.goods.titles ? _this.goods.titles : _this.goods.title,
						number: _this.goods.number,
						city: _this.goods.city,
						type: 4
					};
					info = {
						type: "chatMessage",
						mine: {
							content: contents,
							formid: wx.getStorageSync('client_uid'),
							type: _this.type,
							member_type: _this.member_type
						},
						to: {
							toid: _this.to_id
						}
					}
					wx.sendSocketMessage({
						data: JSON.stringify(info),
						success: function() {
							console.log('发送求购商品成功')
						},
						fail: function() {
							console.log('发送失败')
						}
					})
				} else if (type == 5) {
					contents = {
						goods_id: _this.goods.id,
						title: _this.goods.title,
						image: _this.goods.images,
						money: _this.goods.money,
						unit: _this.goods.unit,
						type: 5
					};
					info = {
						type: "chatMessage",
						mine: {
							content: contents,
							formid: wx.getStorageSync('client_uid'),
							type: _this.type,
							member_type: _this.member_type
						},
						to: {
							toid: _this.to_id
						}
					}
					wx.sendSocketMessage({
						data: JSON.stringify(info),
						success: function() {
							console.log('发送商品信息成功')
						},
						fail: function() {
							console.log('发送失败')
						}
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page_t {
		height: 100vh;
		background-color: #F2F2F2;
		display: flex;
		flex-direction: column;

		.romms {
			flex: 1;
			background: #F2F2F2;
			padding-bottom: 94rpx;
			// padding-bottom: calc(env(safe-area-inset-bottom) + 94rpx);
			margin-bottom: 94rpx;
			margin-bottom: calc(env(safe-area-inset-bottom) + 94rpx);

			.roomtime {
				margin-top: 37rpx;
				color: #999999;
				font-size: 24rpx;
				text-align: center;
			}

			.others {
				display: flex;
				margin-top: 25rpx;
				flex-direction: row;
				align-items: flex-start;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-left: 25rpx;
				}

				.othersmodal {
					margin-left: 12rpx;
					padding: 21rpx;
					border-radius: 5rpx;
					background: #fff;
					color: #333333;
					font-size: 28rpx;
					width: 500rpx;
				}
			}

			.mines {
				display: flex;
				// margin-top: 40rpx;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-end;

				.mymodal {
					padding: 21rpx;
					border-radius: 5rpx;
					background: #fff;
					color: #333333;
					font-size: 28rpx;
					max-width: 500rpx;
					margin-right: 12rpx;
					margin-top: 40rpx;
				}

				image {
					margin-top: 40rpx;
					margin-right: 25rpx;
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				.smsg {
					width: 250rpx;
					height: 320rpx;
					border-radius: 0;
				}

				.looksmodal {
					padding: 28rpx 33rpx 33rpx 33rpx;
					display: flex;
					flex-direction: column;
					background: #fff;
					border-radius: 5rpx;
					width: 480rpx;
					margin-right: 12rpx;

					.looktitle {
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
					}

					.looksdetail {
						margin-top: 25rpx;
						display: flex;
						flex-direction: row;

						image {
							margin: 0;
							width: 108rpx;
							height: 108rpx;
							border-radius: 5rpx;
						}

						.looks_info {
							margin-left: 25rpx;
							display: flex;
							flex-direction: column;
							flex: 1;

							.looks_infotitle {
								color: #333333;
								font-size: 28rpx;
							}

							.lokks_number {
								margin-top: 17rpx;
								color: #999999;
								font-size: 26rpx;
							}
						}
					}

					.metions {
						color: #666666;
						font-size: 26rpx;
						margin-top: 30rpx;
					}
				}
			}

			.roomtype {
				margin-top: 49rpx;
				color: #B7B7B7;
				font-size: 24rpx;
				text-align: center;
			}

			.roomshops {
				margin: 23rpx auto;
				width: 500rpx;
				background-color: #E6E6E6;
				padding: 24rpx 24rpx 15rpx;

				image {
					width: 108rpx;
					height: 108rpx;
					border-radius: 5rpx;
				}

				.roomshops_roomshops_caigou {
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					width: 100%;

					.txt {
						font-size: 22rpx;
					}
				}

				.roomshops_info {
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					width: 260rpx;

					.shopsname {
						color: #333333;
						font-size: 28rpx;
					}

					.shopsprice {
						margin-top: 18rpx;
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						color: #F73F3F;
						font-size: 22rpx;
						font-weight: bold;

						text {
							font-size: 26rpx;
						}
					}
				}

				.arrow {
					margin: 0 0 0 40rpx;
				}

				.sendbox {
					text-align: right;

					.sendbtn {
						display: inline-block;
						height: 50rpx;
						width: 115rpx;
						line-height: 50rpx;
						background: #64BFBB;
						color: #fff;
						border-radius: 25rpx;
						font-size: 22rpx;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}

		.inputsbox {
			position: fixed;
			bottom: 0;
			bottom: env(safe-area-inset-bottom);
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			background: #fff;
			padding: 10rpx;

			&.paddbom {
				padding-bottom: env(safe-area-inset-bottom);
			}

			.openwar {
				flex: 1;
				border: 4rpx solid #eee;
				border-radius: 5rpx;
				padding: 0 10rpx;
				color: #222222;
				font-size: 28rpx;
				height: 70rpx;
			}

			.sendit {
				height: 70rpx;
				width: 120rpx;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				font-size: 28rpx;
				border-radius: 10rpx;
				margin: 0 20rpx;
				background: #38BE8C;
			}

			.sendother {
				width: 50rpx;
				height: 50rpx;
				margin: 0 20rpx;
				border-radius: 50%;
				border: 4rpx solid #808388;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	#flag {
		margin-bottom: 0;
		height: 10rpx;
	}
</style>
